<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
 <div class="well well-lg" id="photos">
  <img class="first" src="images/image1.jpg" />
 </div>
 <style>
     .first
     {
         display:inline;
     }
 </style>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script type="text/javascript">

     $(document).ready(function(){
         var counter=0;
         var nature=[ 'image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'];
         function slideShow(){

             if(counter<(nature.length-1)){
                 counter++;
                 var current=$('#photos .first');
                 var next=$('.first').attr('src','images/'+nature[counter]);
                   current.hide().removeClass('.first');
                   next.fadeIn().addClass('.first');
                   setTimeout(slideShow,3000);
             }
             else
             {
                  counter=0;
                   var display=$('.first').attr('src','images/'+nature[counter]);
                   setTimeout(slideShow,3000);
             }

         }


         slideShow();
     })
 </script>
</body>
</html>